const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: { // 定义两个入口文件， 会生成两个bundle文件，一个是 app.bundle.js， 另一个是 print.bundle.js
        app: './src/index.js',
        print: './src/print.js'
    },

    output: {
        //filename: 'bundle.js',  // 生成固定名称的 bundle 文件，上面 entry 只有一个时使用
        filename: '[name].bundle.js', //根据入口文件的名称，动态生成 bundle 名称
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'  //webpack-dev-middleware 时需要
    },

    devtool: 'inline-source-map', // 开发时，用于把错误堆栈指向真正的文件，而不是打包后的文件

    // 开发时热部署的配置，运行 npm start
    devServer: {
        contentBase: './dist',
        hot: true
    },

    plugins: [
        new CleanWebpackPlugin(['dist']), //会清理输出目录
        new HtmlWebpackPlugin({ //HtmlWebpackPlugin 会默认生成 index.html 文件
            title: 'Output Management'
        })

    ],

    module: {
        rules: [
            { test: /\.txt$/, use: 'raw-loader' }, // 告诉webpack 编译器，当碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，
                                                    // 在对它打包之前，先使用 raw-loader 转换一下。
            { test: /\.css$/, use: ['style-loader', 'css-loader']}, //这使你可以在依赖于此样式的文件中导入样式。如： import './style.css'。
                                                    // 现在，当该模块运行时，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中
            { test: /\.(png|svg|jpg|gif)$/, use: 'file-loader'}, //处理图片
            { test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader'}, //处理字体
            { test: /\.(csv|tsv)$/, use: 'csv-loader'},
            { test: /\.xml$/, use: 'xml-loader'}
        ]
   }
};
